<template>
  <div class="installOrder-box">
    <!-- 需安装订单查询 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="reviseBtn"
        @click="updateConstructionFn"
      ><i
          class="iconfont icon-wode"
          v-if="checkPermi(['system:teams:orderEdit'])"
        />任务分配</el-button>
      <el-button
        class="visitBtn"
        @click="updateInfo"
        v-show="false"
      ><i class="iconfont icon-daochu"></i>
        导出
      </el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @getList="getoutboundOrderData()"
    >
    </forTableCom>
    <taskAssignmentCom
      v-if="flag"
      @closePopUps="closePopUps"
      :linshiId="linshiId"
      :copyId="copyId"
    />
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import { constructionListApi } from '@/api/teams';
import { querySelectOutboundApi, deleteSelectOutboundApi } from '@/api/inventory';
import { ref, onMounted } from 'vue';
import { sliceDate } from '@/utils/date.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import taskAssignmentCom from './components/taskAssignmentCom'
import { checkPermi } from "@/utils/permission.js";


// 弹窗
let flag = ref(false)
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 勾选背景id
const idActive = 'orderId'

let linshiId = ref(null)
let copyId = ref(null)
// 表单
let inventoryForm = ref(
  {
    constructionTeamId: '',     //施工队编号
    constructionTeamName: '',    //施工队名称
    takeOrdersDate: '',          // 接单日期
    creator: '',         // 制单人
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    name: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    name: 'takeOrdersDate',
    label: '接单日期',
    type: 'picker',
  },
  {
    name: 'creator',
    label: '制单人',
  }
])

// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerStore',
    label: '终端门店',
    colorClassName: 'activeColor',
    minwidth: 100

  }, {
    prop: 'constructionTeamName',
    label: '施工队名称',
    minwidth: 100
  },
  {
    prop: 'dispatchDate',
    label: '派单日期',
    minwidth: 100
  },
  {
    prop: 'takeOrdersDate',
    label: '接单日期',
    minwidth: 100
  },
  {
    prop: 'completionIsRequiredDate',
    label: '要求完工日期',
    minwidth: 120
  },
  {
    prop: 'toBeCompletedTime',
    label: '待完工时间',
    minwidth: 100
  },
  {
    prop: 'timeoutPeriod',
    label: '超时时长',
    minwidth: 100
  },
  {
    prop: 'completionDate',
    label: '完工日期',
    minwidth: 100
  },
  {
    prop: 'creator',
    label: '制单人'
  },
  {
    prop: 'photosModel',
    label: '上传照片模型',
    minwidth: 120
  },
  {
    prop: 'status',
    label: '状态'
  }, {
    prop: 'remark',
    label: '备注'
  },
])
// 表格数据内容
let inventoryTableData = ref([


])
// 上传模型图片
const updatePhotos = (params) => {
  console.log(params)
}
// 导出
const updateInfo = () => {

}
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 任务分配
const updateConstructionFn = () => {
  if (multipleSelection.value.length == 1) {
    if (multipleSelection.value[0].status === '待分配') {
      flag.value = true
      linshiId.value = multipleSelection.value[0].orderId
      copyId.value = multipleSelection.value[0].id
    } else {
      ElMessage({
        type: 'warning',
        message: '只能选择状态待分配',
      })
    }

  } else {
    ElMessage({
      type: 'warning',
      message: '勾选一个@^@',
    })
  }
}

// 关闭弹窗
const closePopUps = (v) => {
  flag.value = v
  getoutboundOrderData()

}
// 查询数据
const queryOutboundList = async (data = '') => {
  console.log(data)
  let res = await constructionListApi(data)
  let { code, rows, total } = res
  if (code == 200) {
    // 改变日期显示长度问题
    // inventoryTableData.value = sliceDate(rows, 'createTime')
    inventoryTableData.value = rows
    totals.value = total
  }
}
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  queryOutboundList(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(obj, inventoryForm.value)
  queryOutboundList(params)
}
// 请求出库单接口函数
const getoutboundOrderData = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  queryOutboundList(params)
}



onMounted(() => {

  getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.installOrder-box {
  padding: 16px;
}
</style>
